<template>
  <div class="min">
    <div class="fximg">
      <div class="name">
        复习
      </div>
      <div class="nav">
        <div
          v-for="(item, index) in list"
          :key="index"
          @click="font(index)"
          :style="{ fontSize: item.font }"
        >
          {{ item.nav }}
        </div>
      </div>
    </div>
    <div class="BackGround">
      <div class="box">
        <div class="kgde">
          <p class="kcname">
            <span class="name">课程3</span>
            <span class="pinfen">
              <img src="../assets/homeimg/形状 3 拷贝 2.png" />
              <img src="../assets/homeimg/形状 3 拷贝 2.png" />
              <img src="../assets/homeimg/形状 3 拷贝 2.png" />
            </span>
          </p>
          <p class="jiyi">名人谈记忆</p>
          <p class="chakan">
            <span>学习了1遍 查看讲义 ></span>
            <span>已开课 ></span>
          </p>
        </div>
        <!-- <div class="kgde">
        <p class="kcname">
          <span class="name">课程3</span>
          <span class="pinfen">
            <img src="../assets/homeimg/形状 3 拷贝 2.png" />
            <img src="../assets/homeimg/形状 3 拷贝 2.png" />
            <img src="../assets/homeimg/形状 3 拷贝 2.png" />
          </span>
        </p>
        <p class="jiyi">名人谈记忆</p>
        <p class="chakan">
          <span>学习了1遍 查看讲义 ></span>
          <span>已开课 ></span>
        </p>
      </div> -->
        <!-- <div class="kgde">
        <p class="kcname">
          <span class="name">课程3</span>
          <span class="pinfen">
            <img src="../assets/homeimg/形状 3 拷贝 2.png" />
            <img src="../assets/homeimg/形状 3 拷贝 2.png" />
            <img src="../assets/homeimg/形状 3 拷贝 2.png" />
          </span>
        </p>
        <p class="jiyi">名人谈记忆</p>
        <p class="chakan">
          <span>学习了1遍 查看讲义 ></span>
          <span>已开课 ></span>
        </p>
      </div> -->
        <!-- <div class="kgde">
        <p class="kcname">
          <span class="name">课程3</span>
          <span class="pinfen">
            <img src="../assets/homeimg/形状 3 拷贝 2.png" />
            <img src="../assets/homeimg/形状 3 拷贝 2.png" />
            <img src="../assets/homeimg/形状 3 拷贝 2.png" />
          </span>
        </p>
        <p class="jiyi">名人谈记忆</p>
        <p class="chakan">
          <span>学习了1遍 查看讲义 ></span>
          <span>已开课 ></span>
        </p>
      </div> -->
        <!-- <div class="kgde">
        <p class="kcname">
          <span class="name">课程3</span>
          <span class="pinfen">
            <img src="../assets/homeimg/形状 3 拷贝 2.png" />
            <img src="../assets/homeimg/形状 3 拷贝 2.png" />
            <img src="../assets/homeimg/形状 3 拷贝 2.png" />
          </span>
        </p>
        <p class="jiyi">名人谈记忆</p>
        <p class="chakan">
          <span>学习了1遍 查看讲义 ></span>
          <span>已开课 ></span>
        </p>
      </div> -->
        <!-- <div class="kgde">
        <p class="kcname">
          <span class="name">课程3</span>
          <span class="pinfen">
            <img src="../assets/homeimg/形状 3 拷贝 2.png" />
            <img src="../assets/homeimg/形状 3 拷贝 2.png" />
            <img src="../assets/homeimg/形状 3 拷贝 2.png" />
          </span>
        </p>
        <p class="jiyi">名人谈记忆</p>
        <p class="chakan">
          <span>学习了1遍 查看讲义 ></span>
          <span>已开课 ></span>
        </p>
      </div> -->
      </div>
      <div>我的笔记</div>
      <div class="biji">
        <div class="kgde bijinr">
          <p class="kcname">
            <span class="name">课程3</span>
            <span class="pinfen">
              <img src="../assets/homeimg/形状 3 拷贝 2.png" />
              <img src="../assets/homeimg/形状 3 拷贝 2.png" />
              <img src="../assets/homeimg/形状 3 拷贝 2.png" />
            </span>
          </p>
          <p class="jiyi">听力记忆-大象的原文</p>
          <div class=" yuanwen">
            <p>1.小朋友送给大象一双鞋。2.大象接过鞋子一瞅说：</p>
            <p>
              3.我穿的鞋要又宽又大，4.并且，一双不够，得四只！
            </p>
          </div>
          <p class="bord"></p>
          <p class="time">2020年03月20日 08：00</p>
        </div>
      </div>
    </div>

    <!-- <div>我的笔记</div> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          nav: "我的收藏",
          font: ""
        },
        {
          nav: "我的笔记",
          font: ""
        },
        {
          nav: "我的报告",
          font: ""
        }
      ],
      lists: [
        {
          nav: "我的收藏",
          font: ""
        },
        {
          nav: "我的笔记",
          font: ""
        },
        {
          nav: "我的报告",
          font: ""
        }
      ],
      List: [
        {
          nav: "我的收藏",
          font: "1rem"
        },
        {
          nav: "我的笔记",
          font: "1rem"
        },
        {
          nav: "我的报告",
          font: "1rem"
        }
      ]
      // isActive: false
    };
  },
  methods: {
    font(i) {
      console.log(111111111);
      // this.isActive = true;
      this.list[0].font = this.lists[0].font;
      this.list[1].font = this.lists[1].font;
      this.list[2].font = this.lists[2].font;
      this.list[i].font = this.List[i].font;
    }
  }
};
</script>
<style lang="scss" scoped="scoped">
.active {
  font-size: 1rem;
}
.min {
  width: 100%;
  height: 100%;
  // display: flex;
  // flex-direction: column;
  background: #fafafa;
}
.fximg {
  width: 100%;
  height: 11rem;
  background: url("../assets/homeimg/复习时钟.png") no-repeat;
  background-size: 100%;
  position: relative;
  .name,
  .nav {
    position: absolute;
  }
  .name {
    top: 3.125rem;
    left: 1rem;
  }
  .nav {
    left: 1rem;
    bottom: 1.875rem;
    color: #333333;
    font-size: 0.75rem;
  }
  .nav div {
    float: left;
    margin-right: 1rem;
    height: 1.25rem;
    line-height: 1.25rem;
  }
}
.box {
  flex: 1;
  background: #fafafa;
  padding: 0 0.9375rem 0 0.9375rem;
}
.kgde {
  margin: 0 auto;
  width: 20rem;
  height: 6.75rem;
  background: #fff;
  padding: 0 0.75rem;
  padding-top: 0.625rem;
  margin-top: 0.9375rem;
}
.kcname {
  display: flex;
  justify-content: space-between;
}
.name {
  color: #333333;
  font-size: 1rem;
  font-weight: bold;
}
.jiyi {
  color: #333333;
  font-size: 1rem;
  height: 2.5rem;
  line-height: 2.5rem;
}
.chakan {
  display: flex;
  justify-content: space-between;
  color: #999999;
  font-size: 0.75rem;
  height: 1.25rem;
  line-height: 1.25rem;
  span:nth-of-type(2) {
    display: inline-block;
    text-align: center;
    width: 4.375rem;
    height: 1.5rem;
    background: #fafafa;
    border-radius: 0.75rem;
  }
}

.pinfen img {
  width: 1rem;
  height: 0.9375rem;
  margin: 0 0.1875rem;
}

.bord {
  width: 100%;
  border-bottom: 1px solid #dcdcdc;
  margin-top: 0.75rem;
  margin-bottom: 1rem;
}
.time {
  color: #999999;
  font-size: 0.75rem;
  text-align: right;
}

.bijinr {
  height: 9.375rem;
}
.yuanwen {
  display: block;
  color: #999999;
  font-size: 0.75rem;

  line-height: 1.25rem;
}
.biji {
  width: 21.875rem;
  height: 9.375rem;
  margin: 0 auto;
}

// .kcname {
//   display: flex;
//   justify-content: space-between;
// }
// .name {
//   color: #333333;
//   font-size: 1rem;
//   font-weight: bold;
// }
// .jiyi {
//   color: #333333;
//   font-size: 1rem;
//   height: 2.5rem;
//   line-height: 2.5rem;
// }
// .chakan {
//   display: flex;
//   justify-content: space-between;
//   color: #999999;
//   font-size: 0.75rem;
//   height: 1.25rem;
//   line-height: 1.25rem;
//   span:nth-of-type(2) {
//     display: inline-block;
//     text-align: center;
//     width: 4.375rem;
//     height: 1.5rem;
//     background: #fafafa;
//     border-radius: 0.75rem;
//   }
// }

// .pinfen img {
//   width: 1rem;
//   height: 0.9375rem;
//   margin: 0 0.1875rem;
// }
</style>
